﻿@page "/swals"

<h3>SweetAlert 弹窗组件</h3>

<h4>模态对话框，多用于动作过程中进行询问后继续，或者显示执行结果</h4>

<Block Title="基础用法" Introduction="通过注入服务调用 <code>Swal</code> 来弹出一个对话框">
    <div class="form-inline">
        <div class="row swal-demo">
            <div class="form-group col-12">
                <div class="text-success">成功</div>
                <div>
                    <div class="swal2-icon swal2-success">
                        <div class="swal2-success-circular-line-left"></div>
                        <span class="swal2-success-line-tip"></span><span class="swal2-success-line-long"></span>
                        <div class="swal2-success-ring"></div><div class="swal2-success-fix"></div>
                        <div class="swal2-success-circular-line-right"></div>
                    </div>
                </div>
                <div>
                    <Button Icon="fa fa-fa" Text="弹窗" Color="Color.Success" OnClick="@(e => OnSwal(SwalCategory.Success))" />
                </div>
            </div>
            <div class="form-group col-12">
                <div class="text-success">失败</div>
                <div>
                    <div class="swal2-icon swal2-error">
                        <span class="swal2-x-mark">
                            <span class="swal2-x-mark-line-left"></span>
                            <span class="swal2-x-mark-line-right"></span>
                        </span>
                    </div>
                </div>
                <div>
                    <Button Icon="fa fa-fa" Text="弹窗" Color="Color.Danger" OnClick="@(e => OnSwal(SwalCategory.Error))" />
                </div>
            </div>
            <div class="form-group col-12">
                <div class="text-success">警告</div>
                <div><div class="swal2-icon swal2-warning"></div></div>
                <div>
                    <Button Icon="fa fa-fa" Text="弹窗" Color="Color.Warning" OnClick="@(e => OnSwal(SwalCategory.Warning))" />
                </div>
            </div>
            <div class="form-group col-12">
                <div class="text-success">提示</div>
                <div><div class="swal2-icon swal2-info"></div></div>
                <div>
                    <Button Icon="fa fa-fa" Text="弹窗" Color="Color.Info" OnClick="@(e => OnSwal(SwalCategory.Information))" />
                </div>
            </div>
            <div class="form-group col-12">
                <div class="text-success">疑问</div>
                <div><div class="swal2-icon swal2-question"></div></div>
                <div>
                    <Button Icon="fa fa-fa" Text="弹窗" Color="Color.Secondary" OnClick="@(e => OnSwal(SwalCategory.Question))" />
                </div>
            </div>
        </div>
    </div>
</Block>

<Block Title="设置显示内容" Introduction="通过设置 <code>Title</code> <code>Content</code> 用于显示弹窗标题与内容">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-sm-6">
                <Button Icon="fa fa-fa" Text="Title" Color="Color.Success" OnClick="@ShowTitle" />
            </div>
            <div class="form-group col-12 col-sm-6">
                <Button Icon="fa fa-fa" Text="Content" Color="Color.Success" OnClick="@ShowContent" />
            </div>
        </div>
    </div>
</Block>

<Block Title="自定义按钮" Introduction="通过设置 <code>ButtonTemplate</code> 自定义弹窗内按钮">
    <Button Icon="fa fa-fa" Text="弹窗" Color="Color.Success" OnClick="@ShowButtons" />
</Block>

<Block Title="显示自定义组件" Introduction="通过设置 <code>Component</code> 弹窗内容为自定义组件">
    <Button Icon="fa fa-fa" Text="弹窗" Color="Color.Success" OnClick="@ShowComponent" />
</Block>

<Block Title="模态对话框" Introduction="通过调用 <code>await SwalService.ShowModal</code> 方法弹出模态框，点击弹窗内按钮关闭弹窗后，后续代码继续执行">
    <p>本示例代码通过调用 <code>await SwalService.ShowModal</code> 方法弹出模态框，只有关闭弹窗后，后续代码才继续执行</p>
    <p><code>IsConfirm</code> 参数表示弹窗为确认窗口，自动生成 <code>取消</code> <code>确认</code> 两个按钮</p>
    <Pre class="no-highlight">var ret = await SwalService.ShowModal(op);

// ShowModal 返回后下面代码才执行
Trace?.Log($"模态弹窗返回值为：{ret}");
</Pre>
    <Button Icon="fa fa-fa" Text="模态对话框" Color="Color.Success" OnClick="@ShowModal" />

    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="显示 Footer 信息" Introduction="通过设置 <code>FooterTemplate</code> 自定义 Footer 模板">
    <p>参数 <code>ShowFooter</code> 默认为 <code>false</code> 不显示页脚模板，需要显示设置为 <code>true</code></p>
    <Button Icon="fa fa-fa" Text="带 Footer 弹窗" Color="Color.Success" OnClick="@ShowFooterComponent" />
</Block>

<Block Title="自动关闭功能" Introduction="通过设置 <code>IsAutoHide</code> <code>Delay</code> 属性，自定义自动关闭时间">
    <p>
        参数 <code>IsAutoHide</code> 默认为 <code>false</code> 不启用自动关闭功能
        <br />
        参数 <code>Delay</code> 默认为 4000 毫秒
    </p>
    <Button Icon="fa fa-fa" Text="自动关闭弹窗" Color="Color.Success" OnClick="@ShowAutoCloseSwal" />
</Block>

<Tips class="mt-3">
    <p>
        需要在使用本组件的页面中内置 <code>SweetAlert</code> 组件，或者在 <code>MainLayout</code> 主布局组件中内置，示例代码如下：
    </p>
</Tips>

<Pre>&lt;SweetAlert /&gt;</Pre>

<SweetAlert />

<AttributeTable Items="@GetAttributes()" />
